<template>
    <div class="layout-all">
    <div v-if="is_spec==0">
        <!-- 无规格库存 -->
        <el-form
        ref="stock_form"
        :rules="rules"
        :model="stock_form"
        label-width="100px"
        :label-position="isMobile()?'top':'left'"
      >
        <el-form-item prop="remark" label="修改原因:">
          <el-input
            v-model="stock_form.remark"
            type="textarea"
            :rows="3"
            class="form-width-80"
            placeholder="请输入修改原因"
          />
        </el-form-item>
        <el-form-item prop="stock" label="添加数量:">
          <el-input
            v-model="stock_form.stock"
            class="form-width-10"
            type="number"
            placeholder="请输入添加数量"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="modify_stock('stock_form')"
          >确 定</el-button
        >
      </span>
    </div>
    <div v-else>
        <!-- 规格库存 -->
        <el-table
        v-if="spec_tableData.length>0"
        :data="spec_tableData"
        stripe
        :loading="spec_loading"
        align="center"
        max-height="640px"
        highlight-current-row
       
      ><el-table-column align="center" prop="id" label="序号" width="70" :fixed="isMobile()?'left':undefined"/>
        <el-table-column prop="key_name" label="规格" width="150" />
        <el-table-column prop="stock" label="当前库存" width="80" />
        <el-table-column prop="sale_count" label="销售价格" width="120">
          <template slot-scope="scope">
            <el-input v-if="group" v-model="scope.row.group_real_price" />
            <el-input v-else v-model="scope.row.real_price" />
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="80">
          <template slot-scope="scope">
            <el-button v-if="group"
              :type="scope.row.group_status === 1 ? 'primary' : 'success'"
              size="mini"
              @click="change_status2(scope.row.id, 'group_status', scope.row.group_status)"
              >{{ scope.row.group_status === 1 ? "是" : "否" }}</el-button
            >
            <el-button v-else
              :type="scope.row.status === 1 ? 'primary' : 'success'"
              size="mini"
              @click="change_status2(scope.row.id, 'status', scope.row.status)"
              >{{ scope.row.status === 1 ? "是" : "否" }}</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="thumb" label="上传图片" width="150">
          <template slot-scope="scope">
            <upload-pic v-if="group" :thumb="spec_tableData[scope.$index].group_thumb" @update:thumb="spec_tableData[scope.$index].group_thumb=$event" width="50" height="50" :append="true"/>
            <upload-pic v-else :thumb="spec_tableData[scope.$index].thumb" @update:thumb="spec_tableData[scope.$index].thumb=$event" width="50" height="50" :append="true"/>
          </template>
        </el-table-column>
        <el-table-column prop="change_stock" label="修改库存" min-width="200">
          <template slot-scope="scope">
            <!-- <el-input v-model="scope.row.change_stock" type="number" /> -->
            <el-input-number
              v-model="scope.row.change_stock"
              label="描述文字"
              class="form-width-50"
            />
            <el-input
              v-if="scope.row.change_stock !== 0"
              v-model="scope.row.remark"
              style="margin-top: 5px;"
              type="textarea"
              class="form-width-50"
              :rows="3"
              placeholder="请输入修改原因"
            />
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="modify_spec_stock()">保 存</el-button>
      </span>
    </div>
    </div>
</template>

<script>

export default {
  name:"SpecPanel",
  props:['id','is_spec','group'],
  data() {
    return {
        spec_loading:false,
        spec_tableData:[],
        stock_form:{},
        rules: {
            remark: [{ required: true, message: "请输入修改原因", trigger: "blur" },],
            stock: [{ required: true, message: "请输入添加数量", trigger: "blur" }],
        },
    }
  },
  mounted(){
      if(this.is_spec==0){
        this.stock_form = {
          id: this.id,
          stock: '',
          remark: "",
        }
      }else{
          this.spec_info(this.id)
      }

  },
  methods:{
        // 更改启用状态
    change_status2(id, field, status) {
      
      const index = this.spec_tableData.findIndex((e) => e.id === id);
      console.log(index)
      this.spec_tableData[index][field] =status==1?0:1
    },
    // 操作库存
    modify_stock(formName) {
      this.$refs[formName].validate((v) => {
        if (v) {
            console.log(this.stock_form)
          this.get("/shop/Goods/update_stock", this.stock_form, "post").then(
            (e) => {
              this.$msg_ok("success", "操作成功");
              this.$emit('close')
            }
          );
        }
      });
    },
    close(){
        this.$emit('close',1)
    },
    // 规格属性信息列表
    spec_info(id) {
      this.spec_loading = true;
      const form = {
        goods_id: id,
      };
      this.get("/shop/Goods/spec_list", form, "POST").then((e) => {
        this.spec_tableData = e.list;
        this.spec_loading = false;
      });
    },
    // 操作规格库存
    modify_spec_stock() {
      const form = {
        goods_id: this.goods_id,
        list: this.spec_tableData,
      };
      this.get("/shop/Goods/spec_save", form, "post").then((e) => {
        this.$msg_ok("success", "操作成功");
        this.$emit('close')
      });
    },
  }
}
</script>